import { useEffect, useState } from "react"

export default function TabBar() {
  const [page, setPage] = useState<string>("text")
  const tabs = [
    {
      title: "文本",
      url: "text"
    },
    {
      title: "响应式及背景",
      url: "responsive"
    },
    {
      title: "边框",
      url: "border"
    },
    {
      title: "过度和动画",
      url: "trance"
    },
    {
      title: "demo",
      url: "demo"
    }
  ]

  function storePage(page: string) {
    localStorage.setItem("page", page)
    window.location.href = `http://localhost:3000/${page}`
  }

  useEffect(() => {
    setPage(localStorage.getItem("page") || "text")
  }, [])

  return (
    <>
      <div className="flex justify-around pb-6 pt-6 mb-6 bg-gray-100 z-10">
        {tabs.map((item: { title: string, url: string }) => (
          page !== item.url
            ? (
              <button
                className="text-blue-400 bg-indigo-100 text-xl cursor-pointer hover:text-black hover:bg-indigo-300 p-2 rounded-lg"
                key={item.url}
                onClick={() => storePage(item.url)}
              >
                {item.title}
              </button>
            )
            : (
              <button
                className="text-red-600 bg-indigo-100 text-xl cursor-pointer hover:text-blue-800 hover:bg-indigo-300 p-2 rounded-lg"
                key={item.url}
              >
                {item.title}
              </button>
            )
        ))}
      </div>
    </>
  )
}